<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>控制台 - 教学管理系统首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <#include "../../head/common-css.ftl" />
    <#include "../../head/common-js.ftl" />
    <script>
        var role_options;
        // 加载菜单信息
        $(function () {
            role_options = {
                url: 'doList.do',
                page: true,
                params: {},
                key: 'id',
                index: true,
                cont: 'role_page',
                column: [{
                    name: 'roleName',
                    title: '角色名称',
                    width: 70,
                    align: 'center'
                }, {
                    name: 'roleCode',
                    title: '角色编码',
                    width: 70,
                    align: 'center'
                }, {
                    name: 'createTime',
                    title: '创建时间',
                    width: 130,
                    align: 'center',
                    render: function (value) {
                        if (value) {
                            return formatTime(value.time)
                        }
                        return '无时间'
                    }
                }, {
                    name: 'status',
                    title: '状态',
                    width: 40,
                    align: 'center',
                    render: function (value) {
                        if (value == '1') {
                            return '有效';
                        }
                        return '无效';
                    }
                }, {
                    name: 'id',
                    title: '操作',
                    width: 60,
                    align: 'center',
                    render: function (value, data) {
                        var operate = '<div class="btn-group">';
                        // 修改按钮
                        operate += '<button class="btn btn-xs btn-info" onclick=operateRole("' + value + '")> <i class="icon-edit bigger-120"></i> </button>';
                        if (data.status == 1) {
                            // 删除按钮
                            operate += '<button class="btn btn-xs btn-danger" onclick=validStatus("' + value + '",2)> <i class="icon-trash bigger-120"></i> </button>';
                        } else {
                            // 删除按钮
                            operate += '<button class="btn btn-xs btn-success" onclick=validStatus("' + value + '",1)> <i class="icon-ok bigger-120"></i> </button>';
                        }
                        operate += '</div>';
                        return operate;
                    }
                }]
            };
            var list = $('#role_list').table(role_options);
            setTimeout(function () {
                reinitTreeHight(window.parent.getIframeByElement(document.body));
            }, 200)
        });

        //列点击事件
        $(function () {
            $('#role_list').on('click', 'tbody tr td:not(:last-child)', function () {
                // 属性菜单属性配置
                var setting = {
                    view: {
                        selectedMulti: false,
                    },
                    data: {
                        simpleData: {
                            enable: true,
                            pIdKey: "pid"
                        },
                        key: {
                            name: "menuName"
                        }
                    },
                    callback: {
                        onCollapse: function () {
                            reinitTreeHight(window.parent.getIframeByElement(document.body));
                        },
                        onExpand: function () {
                            reinitTreeHight(window.parent.getIframeByElement(document.body));
                        }
                    }
                };
                // 请求菜单数据
                $.ajax({
                    url: "doRoleMenuList.do",
                    type: "post",
                    dataType: "json",
                    data: {
                        'roleId': $(this).parent().find("td:first-child")[0].id
                    },
                    success: function (msg) {
                        //要执行的代码
                        if (!msg.success) {
                            layer.msg(msg.msg);
                            return;
                        }
                        //登录成功跳转页面
                        $.fn.zTree.init($("#treeDemo"), setting, msg.results);
                        reinitTreeHight(window.parent.getIframeByElement(document.body));
                    }
                });

                $('#role_perms_list').table({
                    url: 'doPermissionList.do',
                    page: false,
                    params: {
                        'roleId': $(this).parent().find("td:first-child")[0].id
                    },
                    index: true,
                    column: [{
                        name: 'roleCode',
                        title: '角色编号',
                        width: 80,
                        align: 'center'
                    }, {
                        name: 'permissionCode',
                        title: '权限编码',
                        width: 80,
                        align: 'center'
                    }, {
                        name: 'permissionName',
                        title: '权限名称',
                        width: 120,
                        align: 'center',
                    }]
                });
                $('#role_perms_div').show();
                $('#role_menus_div').show();
            });

            // 点击搜索按钮
            $('#searchBtn').click(function () {
                $('#role_perms_div').hide();
                $('#role_menus_div').hide();
                role_options.params.roleName = $('#role_name').val();
                $('#role_list').table(role_options);
            });
        });


        // 点击操作按钮
        function operateRole(roleId) {
            var url = '${request.contextPath}/sys/role/roleOperate.htm';
            if (roleId) {
                url += '?roleId=' + roleId
            }
            layer.open({
                type: 2,
                title: '角色信息添加',
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '85%'],
                content: url
            });
        }

        function validStatus(roleId, status) {
            layer.confirm(status == 2 ? '是否确认要删除角色<span style="color: red">(相关权限需要重新设置)</span>？' : '是否确认要恢复角色？', {
                btn: ['确认', '取消'] //按钮
            }, function (index) {
                $.ajax({
                    url: "${request.contextPath}/sys/role/validStatus.do",
                    type: "post",
                    data: {
                        'id': roleId,
                        'status': status
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            $('#role_list').table(role_options);
                        } else {
                            layer.msg(result.msg);
                        }
                    }
                });
                layer.close(index);
            });
        }
    </script>
</head>
<body>
<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <!-- table end -->
            <div class="row">
                <div class="col-sm-6">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h5 class="smaller">角色信息</h5>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main padding-6">
                                <div class="table-responsive page-content">
                                    <form class="form-inline">
                                        <label for="role_name">角色名:</label>
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input type="text" class="input-medium" id="role_name">
                                            </div>
                                        </div>
                                        <button type="button" id="searchBtn" class="btn btn-info btn-xs">
                                            <i class="icon-eye-open"></i>
                                            查询
                                        </button>
                                        <button type="button" onclick="operateRole()" class="btn btn-info btn-xs">
                                            <i class=" icon-book"></i>
                                            添加角色
                                        </button>
                                    </form>
                                    <div class="space-4"></div>
                                    <!-- table start -->
                                    <table class="table-list table-hover" id="role_list"></table>
                                    <div class="pager" id="role_page"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="col-sm-12" id="role_menus_div" style="display: none">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h5 class="smaller">角色拥有的菜单</h5>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-6">
                                    <div class="table-responsive page-content">
                                        <!-- table start -->
                                        <ul id="treeDemo" class="ztree">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" id="role_perms_div" style="display: none">
                        <div class="widget-box">
                            <div class="widget-header">
                                <h5 class="smaller">角色拥有的权限</h5>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-6">
                                    <div class="table-responsive page-content">
                                        <!-- table start -->
                                        <table class="table-list table-hover" id="role_perms_list"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>